<template>
  <div class="order-status-pie-wrapper" :class="theme">
    <div v-if="loading" class="pie-skeleton animate-pulse">
      <div class="pie-skeleton-circle"></div>
    </div>
    <v-chart
      v-else
      ref="chartRef"
      class="pie-chart"
      :option="pieOption"
      :theme="theme"
      autoresize
    />
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted, onBeforeUnmount } from 'vue'
import VChart from 'vue-echarts'

const props = defineProps({
  data: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
  theme: { type: String, default: 'light' } // 'light' | 'dark'
})

const chartRef = ref(null)

const pieOption = ref({})

const getGradient = (idx, theme) => {
  // 预设渐变色组 - 使用不同深浅的绿色
  const gradients = theme === 'dark' ? [
    ['#53c157', '#388E3C'],  // 主色到深色
    ['#388E3C', '#259629'],  // 深色到次深色
    ['#259629', '#53c157'],  // 次深色到主色
    ['#53c157', '#c6f3c7'],  // 主色到浅色
    ['#c6f3c7', '#53c157'],  // 浅色到主色
    ['#53c157', '#388E3C']   // 主色到深色
  ] : [
    ['#53c157', '#388E3C'],  // 主色到深色
    ['#388E3C', '#259629'],  // 深色到次深色
    ['#259629', '#53c157'],  // 次深色到主色
    ['#53c157', '#c6f3c7'],  // 主色到浅色
    ['#c6f3c7', '#53c157'],  // 浅色到主色
    ['#53c157', '#388E3C']   // 主色到深色
  ]
  return {
    type: 'linear',
    x: 0, y: 0, x2: 1, y2: 1,
    colorStops: [
      { offset: 0, color: gradients[idx % gradients.length][0] },
      { offset: 1, color: gradients[idx % gradients.length][1] }
    ]
  }
}

watchEffect(() => {
  if (!props.data || props.data.length === 0) return
  pieOption.value = {
    tooltip: {
      trigger: 'item',
      backgroundColor: props.theme === 'dark' ? '#222' : '#fff',
      borderColor: '#53c157',
      borderWidth: 1,
      textStyle: { 
        color: props.theme === 'dark' ? '#eee' : '#333',
        fontSize: 14
      },
      formatter: '{b}: {c} ({d}%)',
      position: function (pos, params, dom, rect, size) {
        // Calculate position to avoid overlap
        return [Math.min(pos[0], size.viewSize[0] - dom.offsetWidth - 10), pos[1]];
      }
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: props.theme === 'dark' ? '#eee' : '#333',
        fontSize: 14
      },
      itemGap: 12,
      itemWidth: 15,
      itemHeight: 10,
      padding: [0, 10, 0, 0]
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
          shadowBlur: 20,
          shadowColor: props.theme === 'dark' ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.15)'
        },
        label: {
          show: true,
          position: 'outside',
          color: props.theme === 'dark' ? '#eee' : '#333',
          formatter: '{b}\n{d}%',
          fontSize: 14,
          fontWeight: 'bold',
          distanceToLabelLine: 3,
          alignTo: 'labelLine',
          margin: 5,
          overflow: 'break',
          lineHeight: 15
        },
        labelLayout: {
          hideOverlap: true,
          moveOverlap: 'shiftY',
          draggable: true,
          dx: 5
        },
        labelLine: {
          show: true,
          length: 12,
          length2: 10,
          minTurnAngle: 45,
          maxSurfaceAngle: 80,
          lineStyle: {
            color: props.theme === 'dark' ? '#eee' : '#333',
            width: 1
          },
          smooth: 0.2
        },
        data: props.data.map((item, idx) => ({
          value: item.count,
          name: item.status,
          itemStyle: {
            color: getGradient(idx, props.theme)
          }
        })),
        emphasis: {
          scale: true,
          scaleSize: 12,
          itemStyle: {
            shadowBlur: 40,
            shadowColor: props.theme === 'dark' ? 'rgba(0,0,0,0.9)' : 'rgba(0,0,0,0.25)'
          }
        },
        animation: true,
        animationEasing: 'cubicOut',
        animationDuration: 1200
      }
    ]
  }
})

// 响应式布局：监听窗口resize
let resizeHandler = null
onMounted(() => {
  resizeHandler = () => chartRef.value && chartRef.value.resize()
  window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style scoped>
.order-status-pie-wrapper {
  width: 100%;
  min-height: 320px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pie-chart {
  width: 100%;
  height: 350px;
  max-height: 500px;
  min-height: 300px;
  transition: background 0.3s;
  padding: 0 25px 0 15px;
}
.pie-skeleton {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-bg-color, #f5f7fa);
  border-radius: 24px;
}
.pie-skeleton-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e0e0 40%, #f5f5f5 100%);
}
/* 深色模式下的样式 */
.order-status-pie-wrapper.dark {
  background: #181818;
}
:deep(.echarts){
  background: transparent !important;
}
:deep(.echarts-legend){
  color: inherit !important;
}
</style> 